<template>
  <el-container>
    <div class="admin" >
      <div class="my-item" style=" background-image: linear-gradient(to left, #FFC312, #EE5A24, #FFC312);
      background-size: 200%;
      transition: 0.6s;" @click="toStu">
        <div class="dataDis" >
          <p>今日入区人数：{{ todayPlayerNum }}</p>
          <p>较昨日增加：{{ addPlayerNum }}</p>
        </div>
        <div class="iconImg" style=""><img src="@/assets/统计图.png" width="80px"></div>
      </div>
      <div class="my-item" style="background-image: linear-gradient(to left, #C4E538, #009432, #C4E538);
      background-size: 200%;
      transition: 0.6s;"  @click="toRoom">
        <div class="dataDis">
          <p>今日门票订单数：{{ todayTicketNum}}</p>
          <p>较昨日增加：{{addTicketNum}}</p>
        </div>
        <div class="iconImg"> <img src="@/assets/统计图.png" width="80px"></div>
      </div>
      <div class="my-item" style=" background-image: linear-gradient(to left, #12CBC4, #0652DD, #12CBC4);
      background-size: 200%;
      transition: 0.6s;"  @click="toRepair">
        <div class="dataDis threedata">
          <p>今日商品订单数：{{ todayGoodNum }}</p>
          <p>较昨日新增：{{ addGoodNum }}</p>
        </div>
        <div class="iconImg"><img src="@/assets/统计图.png" width="80px"></div></div>
      <div class="my-item" style="
      background-image: linear-gradient(to left, #FDA7DF, #9980FA, #FDA7DF);
      background-size: 200%;
      transition: 0.6s;"  @click="toAbsent">
        <div class="dataDis threedata">
          <p>今日意见反馈数：{{ todayFeedbackNum }}</p>
          
          <p>较昨日新增：{{ addFeedbackNum }}</p>
        
        </div>
        <div class="iconImg"><img src="@/assets/统计图.png" width="80px"></div></div>
      </div>
  
    <el-main class="admin_main">
      <spotTicketNumVue :color="color" class="main_item"></spotTicketNumVue>
      <div class="main_item">
        <div>
          <p style="width: 100px; margin: 0 auto;">快捷导航</p>
            <div style="width: 70%;height: 45%; display: flex;flex-wrap: wrap; justify-content: space-around; margin-left: 80px;">
              
              <div class="nav-item" @click="toPath(1)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/拍照.png" alt="" style="height: 48px; width: 48px; margin: 0 auto;">
                </div>
                <p>景点信息</p>
              </div>

              <div class="nav-item" @click="toPath(2)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/身份信息.png" alt="" style="height: 48px; width: 48px; margin: 0 auto;">
                </div>
                <p>攻略信息</p>
              </div>

              <div class="nav-item" @click="toPath(3)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/发票.png" alt="" style="height: 48px; width: 48px; margin: 0 auto;">
                </div>
                <p>门票信息</p>
              </div>

              <div class="nav-item" @click="toPath(4)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/订单.png" alt="" style="height: 48px; width: 48px; margin: 0 auto;">
                </div>
                <p>门票订单</p>
              </div>

              <div class="nav-item" @click="toPath(5)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/购物商城.png" alt="" style="height: 48px; width: 48px; margin: 0 auto;">
                </div>
                <p>文创订单</p>
              </div>
              <div class="nav-item" @click="toPath(6)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/购物.png" alt="" style="height: 42px; width: 48px; margin: 0 auto;">
                </div>
                <p>文创商品</p>
              </div>
              <div class="nav-item" @click="toPath(7)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/美食.png" alt="" style="height: 48px; width: 48px; margin: 0 auto;">
                </div>
                <p>美食门店</p>
              </div>
              <div class="nav-item" @click="toPath(8)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/人员信息.png" alt="" style="height: 48px; width: 48px; margin: 0 auto;">
                </div>
                <p>用户信息</p>
              </div>
              <div class="nav-item" @click="toPath(9)">
                <div style="width: 80%; margin-left: 20px;" class="to-p">
                  <img  src="@/assets/搬家.png" alt="" style="height: 48px; width: 48px; margin: 0 auto;">
                </div>
                <p>失物招领</p>
              </div>
            </div>
        </div>
        <div style="width: 100%; height: 50%;">
          <R7dayGoodMoneyVue :dataList="goodsDataList" :axdata="axdata"></R7dayGoodMoneyVue>
        </div>
       
      </div>
    </el-main>
    <el-footer style="text-align: center;"></el-footer>
  </el-container>
  
  
  </template>
  
  <script>

 
import request from '@/utils/request';
 
import spotTicketNumVue from '@/components/spotTicketNum.vue';
import R7dayGoodMoneyVue from '@/components/R7dayGoodMoney.vue';

  export default {
   components:{
    spotTicketNumVue,
    R7dayGoodMoneyVue
   },
    data(){
      return{
        color:'#000000',
        goodsDataList:[21000,20022,24200,31300,33001,55567,67541],
        axdata:['1','2','3','4','5','6','7'],
        todayFeedbackNum:20,
        addFeedbackNum:10,
        todayPlayerNum:200,
        addPlayerNum:2,
        todayGoodNum:20,
        addGoodNum:10,
        todayTicketNum:200,
        addTicketNum:20,
        
      }
    },
    created(){
   
     
    },
    mounted() {

      
    },

  
  methods:{
       
      
          toPath(index){
              if(index==1){
                this.$router.replace({path: "/SceneryInfo"});
              }else if(index==2){
                this.$router.replace({path: "/StrategyInfo"});
              }else if(index==3){
                this.$router.replace({path: "/TicketInfo"});
              }else if(index==4){
                this.$router.replace({path: "/TicketOrder"});
              }else if(index==5){
                this.$router.replace({path: "/GoodsOrder"});
              }else if(index==6){
                this.$router.replace({path: "/WenGoodsInfo"});
              }else if(index==7){
                this.$router.replace({path: "/FoodInfo"});
              }else if(index==8){
                this.$router.replace({path: "/UserInfo"});
              }else if(index==9){
                this.$router.replace({path: "/LostObject"});
              }
          },
          toStu(){
          this.$router.replace({path: "/SceneryInfo"});
        },
        toRoom(){
          this.$router.replace({path: "/TicketOrder"});
        },
        toRepair(){
          this.$router.replace({path: "/GoodsOrder"});
        },
        toAbsent(){
          this.$router.replace({path: "/FeedBack"});
        },
         
      }
  }
  </script>
  <style scoped>
   .nav-item p {
    font-size: 12px;
    margin-left: 18px;
  }
    .admin {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;
    
    }
    .admin_main {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
     
    }
    .main_item {
      height: 600px;
      flex:0 0 45%;
      margin-left: calc(4% / 3);
    }
    .my-item{
      border-radius: 10px;
      justify-content: space-between;
      display: flex;
      flex:0 0 22%;
      height: 100px;
      text-align: center;
      line-height:30px;
      background-color: #2ca75b;
      margin-left: calc(4% / 3);
    }
    .my-item div {
      margin-top: 10px;
      flex:48%;
      width: 100px;
      height: 70px;
    }
    .dataDis {
      color: aliceblue;
      line-height: 8px;
      text-align: left;
      margin-top: 40px;
    }
    .threedata {
      margin-top: 0px;
    }
    .dataDis p {
      margin-bottom: 20px;
      margin-left: 10px;
      width: 200px;
      font-size: 14px;
      margin-top: 15px;
    }
    .iconImg {
      padding: 0 0;
      width: 80px;
    }
    .nav-item {
      width: 30%;
      height: 70px;
     
      margin-top: 10px;
    }
  </style>
  
  